<template>
    <div class="post-card white-bg">
        <div @click="onClickMain">
            <!-- tip: 为了保证换行存在使用了white-space: pre-wrap，所以尽量减少前后的空格 -->
            <div class="community-text black-color font-bold normal-text">
                <div>{{post.title}}</div>
                <div class="right-icon grey-color" v-if="hasRightIcon">
                    <span class="icon">&#xe770;</span>
                </div>
            </div>
            <!-- 视频 -->
            <div class="community-img-wrap clearfix" v-if="post.video" @click.stop>
                <video class="video" :src="post.video" :poster="post.image" object-fit="cover" :controls="true"></video>
            </div>
        </div>

        <!-- 底部内容 -->
        <div class="community-footer before-line">
            <div class="clearfix normal-text">
                <div class="col col-4">
                    <wx-button class="btn text-normal" open-type="share" :id="post.id">
                        <sapn class="icon">&#xe641;</sapn>
                        分享
                    </wx-button>
                </div>
                <div class="col col-4" :class="{'primary-color': post.already_comment}" @click="onClickPublishComment">
                    <span class="icon">&#xe61c;</span>
                    {{post.comment_number ? post.comment_number : ''}}
                </div>
                <div class="col col-4" :class="{'primary-color': post.has_thumb_up}" @click="onClickThumbUp">
                    <span class="icon">&#xe73c;</span>
                    {{post.thumb_up_number ? post.thumb_up_number : ''}}
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="js">
import {
    STATUS_LOGIN_LOGINED,
} from '@/lib/constant';
import {
    mapState,
} from 'vuex';
import store from '@/store';
// import {
//     getVideoPoster,
// } from '@/lib/utils';
export default {
    name: 'PostCard',
    data() {
        return {
            isLogin: true,
        };
    },
    props: {
        index: {
            type: Number,
            required: true,
        },
        post: {
            type: Object,
            required: true,
        },
        hasRightIcon: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        ...mapState({
            /** 用户基础信息 */
            userBasicInfo: state => state.user.basicInfo,
            hasLogin: state => state.util.hasLogin,
        }),
        thumbUpRequesting() {
            return store.state.community.thumbUpRequesting;
        },
        // poster() {
        //     // return '';
        //     return this.post.video ? getVideoPoster(this.post.video) : '';
        // },
    },
    methods: {
        hasLogined(isLogin) {
            if (isLogin === STATUS_LOGIN_LOGINED) {
                this.isLogin = true;
            }
        },
        cancelLogin(op) {
            this.isLogin = op;
        },
        checkAuth() {
            if (!(this.hasLogin === STATUS_LOGIN_LOGINED && this.userBasicInfo && this.userBasicInfo.nickname && this.userBasicInfo.avatar)) {
                // console.log('name');
                this.isLogin = false;
                return false;
            }
            return true;
        },
        onClickMain() {
            this.$emit('click', this.post.id);
        },
        onClickPublishComment() {
            if (!this.checkAuth()) {
                return;
            };
            this.$emit('publish-comment', this.post.id);
        },
        async onClickThumbUp() {
            if (!this.checkAuth()) {
                return;
            };
            if (this.thumbUpRequesting) {
                return;
            }
            await store.dispatch('community/thumbUp', {
                postId: this.post.id,
                thumbUp: !this.post.has_thumb_up,
            });
            // console.log(this.post);
        },
    },
    async mounted() {
        // console.log('post', this.post);
    },
};
</script>

<style lang="less">
    @import '../../lib/style/mixins.less';

    @community-padding-h: 20 *2rpx; // 容器左右padding
    @img-grid-padding: 2px; // 每个padding，左右合在一起最终是4px

    .post-card {
        position: relative;
        margin-bottom: 10px;
        .community-text {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px @community-padding-h 0;
            color: @black-color;
            word-break: break-all;
            word-wrap: break-word;
            white-space: pre-wrap;
            .icon {
                width: 20px;
                height: 30px;
                font-size: 22px;
                text-align: center;
            }
        }
        .community-img-wrap {
            padding: (10px - @img-grid-padding) (@community-padding-h - @img-grid-padding) (10px - @img-grid-padding);
            .video {
                width: 100%;
            }
        }

        // 底部样式
        .community-footer {
            position: relative;
            padding: 7px 0;
            font-size: 16px;
            line-height: 22px;
            color: #555;
            text-align: center;
            border-top: 1px solid #ddd;
            color: @color-font-2;
            .icon {
                font-size: 22px;
                vertical-align: middle;
            }
            .primary-color {
                color: @primary-color;
            }
            .btn {
                color: @color-font-2;
            }
        }
    }
</style>